import React, {PureComponent} from "react"
import {rootPath} from "init"
// import "antd/dist/antd.less"
import "./index.less"
import {appContext} from "context/app-context"
import {createMenus, menuSettings, permissionMenu} from "./menu-creator"
import {LoadingOutlined} from '@ant-design/icons';
import {ConfigProvider, Menu} from "antd";
import menuCompose from "./menu-compose"
import {read} from "zr-react-toolbox"
import menus from "menus"

const RootMenu = Menu

const globalConfig = {
	getPopupContainer: () => document.getElementsByTagName("body")[0]
}

const roleResource = {
	super_admin: ['product', 'admin', 'salesman_manager', 'salesman', 'log:login', 'log:operation', 'setting:formula', 'setting:commission', 'setting:template'],
	admin: ['product', 'salesman_manager', 'salesman', 'log:login', 'log:operation', 'setting:formula', 'setting:commission', 'setting:template'],
	salesman_manager: ['salesman']
}

@appContext
@menuCompose
class AppMenu extends PureComponent {

	render() {
		const {context, selectedKeys, openKeys} = this.props
		const userInfoBusy = context.userInfoBusy
		const role = context.userInfo.role
		const resources = roleResource[role]
		const userMenus = resources && resources.length > 0 ? permissionMenu(menus(), resources) || [] : []
		//const userMenus = menus()
		return (
			<div className="zr-menu-container">
				{
					userInfoBusy
						? <LoadingOutlined/>
						:
						<ConfigProvider {...globalConfig}>
							<RootMenu {...menuSettings}
							          mode={!context.menuCollapsed ? 'inline' : 'vertical'}
							          defaultSelectedKeys={selectedKeys}
							          defaultOpenKeys={openKeys}
							          inlineCollapsed={context.menuCollapsed}
							>
								{createMenus(userMenus, null, rootPath)}
							</RootMenu>
						</ConfigProvider>
				}
			</div>
		);
	}
}

export default AppMenu